<template>
	<view class="main-page" style="padding-bottom: 100rpx;">
		<image src="../../static/bg_header_order.png" class="head-img-container"
		 mode="aspectFill" v-if="actDetailData.procedureStatus != 3 && actDetailData.procedureStatus != 4"></image>
		<view class="title-container">
			<image class="back-ic" src="../../static/ic_back_grey.png" @click="goBack"></image>
			<text class="font-333-36 font-weight-600">订单详情</text>
		</view>
		
		<!-- 顶部 订单状态 -->
		<view class="status-box">
			<!-- 进行中  待付款 -->
			<view class="column-container" 
			v-if="actDetailData.checkStatus == 1 && actDetailData.procedureStatus == 0">
				<view class="row-container-row-between">
					<view class="row-container">
						<text class="font-333-44 font-weight-600">等待付款</text>
						<text class="font-333-44 font-weight-600 ml-20">{{waitPayLeftTimeStr}}</text>
					</view>
					<text class="pay-btn" @click="clickToBuy">立即付款</text>
				</view>
				<text class="font-333-24 mt-12">请在倒计时结束前支付订单，如超时订单将自动取消</text>
			</view>
			
			<!-- 进行中  待上传截图 -->
			<view class="column-container"  v-if="(actDetailData.checkStatus == 1 || actDetailData.checkStatus == 2)
			&& actDetailData.procedureStatus == 1 && actDetailData.auditExpireTime && actDetailData.auditExpireTime > 0">
				<view class="row-container">
					<text class="font-333-36 font-weight-600 mr-18">上传截图倒计时</text>
					<!-- <uni-countdown
						:font-size="14"
						 :showDay="leftHour > 23" 
						 color="#FFFFFF"
						 backgroundColor="#333333"
						 splitorColor="#333333"
						 :hour="leftHour" 
						 :minute="leftMin" 
						 :second="leftSec"
						 style="font-weight: 600;"
						 @timeup="loadActDetail"
					>
						
					</uni-countdown> -->
					
					<uv-count-down
						:time="actDetailData.auditExpireTime * 1000"
						format="HH时mm分ss秒"
						@change="handleChangeCountDown"
					>
						<view class="row-container-center">
							<text class="time-item" v-if="timeData.days > 0">{{timeData.days > 9 ? timeData.days : '0' + timeData.days }}</text>
							<text class="font-333-24 font-weight-600 mr-6 ml-6" v-if="timeData.days > 0">天</text>
							<text class="time-item" v-if="timeData.hours">{{timeData.hours > 9 ? timeData.hours : '0' + timeData.hours }}</text>
							<text class="time-item" v-else>00</text>
							<text class="font-333-24 font-weight-600 mr-6 ml-6">时</text>
							<text class="time-item" v-if="timeData.minutes">{{timeData.minutes > 9 ? timeData.minutes :'0' + timeData.minutes }}</text>
							<text class="time-item" v-else>00}</text>
							<text class="font-333-24 font-weight-600 mr-6 ml-6">分</text>
							<text class="time-item" v-if="timeData.seconds">{{timeData.seconds > 9 ? timeData.seconds :'0' + timeData.seconds }}</text>
							<text class="time-item" v-else>00</text>
							<text class="font-333-24 font-weight-600 mr-6 ml-6">秒</text>
						</view>
					</uv-count-down>
					
				</view>
				<text class="font-333-24 mt-12">请在倒计时结束前上传截图，如超时视为参与失败，将不与返现</text>
			</view>
			
			<!-- 审核中 -->
			<view class="row-container-row-between" v-if="actDetailData.procedureStatus == 2">
				<view class="column-container">
					<text class="font-333-44 font-weight-600">等待商家审核</text>
					<text class="font-333-24 mt-12">请耐心等待商家审核，请见谅</text>
				</view>
				<view class="row-container play-ad" @click="handlePlayAd"
				 v-if="!actDetailData.errorMsg && actDetailData.checkAudit == 0 && actDetailData.checkSpeedOpen == 1">
					<image class="wh-24 mr-6" src="../../static/ic_play_ad_yellow.png"></image>
					<text class="font-ffd-24 font-weight-600">看广告秒审</text>
				</view>
			</view>
			
			<!-- 审核失败 -->
			<view class="column-container" v-if="actDetailData.procedureStatus == 4">
				<text class="font-333-44 font-weight-600">很抱歉，审核失败</text>
				<text class="font-333-24 mt-12">如有疑问请联系客服，感谢您对最星城的支持</text>
			</view>
			
			<!-- 审核成功-->
			<view class="column-container" v-if="actDetailData.procedureStatus == 3">
				<text class="font-333-44 font-weight-600">订单已结束</text>
				<text class="font-333-24 mt-12">感谢您对最星城的支持</text>
			</view>
			
			<!-- 已过期 -->
			<view class="column-container" v-if="actDetailData.procedureStatus == 6">
				<text class="font-333-44 font-weight-600">已过期</text>
				<text class="font-333-24 mt-12">您的订单已过期</text>
			</view>
			
			<!-- 已取消 -->
			<view class="column-container" v-if="actDetailData.procedureStatus == 5">
				<text class="font-333-44 font-weight-600">已取消</text>
				<text class="font-333-24 mt-12">您的订单已取消</text>
			</view>
		</view>
		
		<!-- 审核提示 -->
		<view class="info-container" v-if="actDetailData.procedureStatus == 2 
		|| actDetailData.procedureStatus == 3 || actDetailData.procedureStatus == 4" 
		>
			<view class="audit-box" v-if="actDetailData.procedureStatus == 2">
				<view class="row-container">
					<image class="audit-ic" src="../../static/ic_audit_black.png"></image>
					<text class="font-333-32 font-weight-600">您的订单已在审核中</text>
				</view>
				<text class="font-333-24 mt-6 ml-50">请您耐心等待，订单最晚将于明早10点前审核完毕</text>
			</view>
			<view class="audit-box" v-if="actDetailData.procedureStatus == 3" style="background: rgba(49, 203, 161, 0.2);">
				<view class="row-container">
					<image class="audit-ic" src="../../static/ic_audit_green.png"></image>
					<text class="font-333-32 font-weight-600" style="color: #0CAE82;">恭喜您，您的订单审核成功</text>
				</view>
				<text class="font-333-24 mt-6 ml-50" style="color: #0CAE82;">您可以前往“我的”频道进行提现</text>
			</view>
			<view class="audit-box" v-if="actDetailData.procedureStatus == 4" style="background: rgba(255, 98, 31, 0.1);">
				<view class="row-container">
					<image class="audit-ic" src="../../static/ic_audit_red.png"></image>
					<text class="font-ff621f-32 font-weight-600">很抱歉，您的审核未通过</text>
				</view>
				<text class="font-ff621f-24 mt-6 ml-50">失败原因：{{actDetailData.failMsg}}</text>
			</view>
		</view>
		
		<!-- 店铺信息 -->
		<view class="shop-info-box">
			<view class="row-container-top width-100p">
				<image class="shop-img" :src="actDetailData.shopImg"></image>
				<view class="column-container width-100p">
					<view class="row-container-row-between-top">
						<text class="shop-name">{{actDetailData.shopName}}</text>
						<text class="copy-shop" @click="handleCopy(actDetailData.shopName)">复制店名</text>
					</view>
					
					<image class="height-38" :src="actDetailData.brandImg" mode="heightFix" 
					v-if="actDetailData.brandImg"></image>
					<view class="height-38" v-else></view>
					
					<view class="row-container mt-10">
						<text class="tag">满{{actDetailData.fullAmount}}返{{actDetailData.commission}}</text>
						<text class="tag" v-if="actDetailData.checkComment == 0">{{actDetailData.favourableCommentImgCount}}图{{actDetailData.favourableCommentCount}}字</text>
						<text class="no-comment" v-else>无需评价</text>
					</view>
				</view>
			</view>
			<view class="row-container mt-24">
				<image class="wh-28" src="../../static/ic_location_grey.png"></image>
				<text class="font-999-24">{{actDetailData.shopAddress}}</text>
			</view>
		</view>
		
		<!-- 领取红包 -->
		<view class="get-bonus-box" @click="handleReceiveCoupon" 
		v-if="actDetailData.brandName == '美团' || actDetailData.brandName == '饿了么'">
			<view class="row-container">
				<image class="brand-small" v-if="actDetailData.brandName == '美团'" 
				src="../../static/ic_mt_small.png"></image>
				<image class="brand-small" v-if="actDetailData.brandName == '饿了么'"
				src="../../static/ic_ele_small.png"></image>
				<text class="font-333-28 font-weight-600">领取{{actDetailData.brandName}}红包再下单</text>
				<view class="step-prize">
					<image class="prize-bg" src="../../static/bg_prize.png"></image>
					<text class="font-fff-24" style="margin-left: 16rpx;z-index: 100;">最高500元</text>
				</view>
			</view>
			<text class="get-btn">立即领取</text>
		</view>
		
		<!-- 活动流程 -->
		<view class="time-line-container">
			<!-- procedureStatus  0为待支付，1为待上传，2为待审核，3为审核通过，4为审核失败，5为已取消，6已退款-->
			<!-- 第一步 -->
			<view class="step-box">
				<view class="column-container-row-center mt-10">
					<image class="step-dot" src="../../static/ic_step_yellow.png"></image>
					<view class="step-middle-line"></view>
				</view>
				<view class="column-container ml-24 width-100p">
					<text class="step-title">第1步：到{{actDetailData.brandName}}下单</text>
					<view class="row-container">
						<view class="yellow-btn mr-20" @click="gotoOtherShop"
							v-if="(actDetailData.brandName == '饿了么' && actDetailData.shopCodeImg) ||
							(actDetailData.brandName == '美团' && (actDetailData.shopCodeImg  || actDetailData.threeCode))"
						>
							<text class="font-333-24 font-weight-600">快捷进店下单</text>
							<image class="btn-arrow" src="../../static/ic_step_arrow_black.png"></image>
						</view>
						<view class="yellow-btn" @click="handleCopy(actDetailData.shopName)">
							<text class="font-333-24 font-weight-600">复制店名进店</text>
							<image class="btn-arrow" src="../../static/ic_step_arrow_black.png"></image>
						</view>
					</view>
					
					<view class="step-divider"></view>
				</view>
			</view>
			<!-- 第二步 -->
			<view class="step-box">
				<view class="column-container-row-center" style="position: relative;">
					<image class="step-dot" src="../../static/ic_step_yellow.png" 
					style="margin-top: 30rpx;"></image>
					<view class="step-large-line" style="position: absolute;"
					 v-if="actDetailData.procedureStatus == 0 
					 || actDetailData.procedureStatus == 1
					 || actDetailData.procedureStatus == 2"></view>
					<view class="step-middle-line" style="position: absolute;" v-else></view>
				</view>
				<view class="column-container ml-24 width-100p">
					<view class="row-container-row-between width-100p">
						<text class="step-title" style="margin-top: 20rpx;">第2步：提交订单截图</text>
					</view>
					<text class="step-content">请在时限内提交订单，否则名额作废，无返现</text>
					<view class="row-container">
						<view class="yellow-btn" @click="gotoUploadOrder" 
						v-if="actDetailData.procedureStatus == 1 || actDetailData.procedureStatus == 2">
							<text class="font-333-24 font-weight-600" v-if="actDetailData.procedureStatus == 1">提交截图</text>
							<text class="font-333-24 font-weight-600" v-if="actDetailData.procedureStatus == 2">修改截图</text>
							<image class="btn-arrow" src="../../static/ic_step_arrow_black.png"></image>
						</view>
						<view class="yellow-btn" style="background: #EEEEEE;" 
						v-else-if="actDetailData.procedureStatus == 0">
							<text class="font-999-24">提交截图</text>
							<image class="btn-arrow" src="../../static/ic_step_arrow_grey.png"></image>
						</view>
					</view>
					<view class="step-divider"></view>
				</view>
			</view>
			<!-- 第三步 -->
			<view class="step-box">
				<view class="column-container-row-center" style="position: relative;">
					<image class="step-dot" src="../../static/ic_step_yellow.png" 
					style="margin-top: 30rpx;"></image>
					<view class="step-mini-line" style="position: absolute;"></view>
				</view>
				<view class="column-container ml-24 width-100p">
					<text class="step-title" style="margin-top: 20rpx;">第3步：返现到账去提现</text>
					<text class="step-content">请到'我的'频道，进行提现</text>
					<view class="step-withdraw" @click="gotoWithdraw">
						<text class="font-333-24 font-weight-600">去提现</text>
						<image class="btn-arrow" src="../../static/ic_step_arrow_black.png"></image>
					</view>
					<view class="step-divider"></view>
				</view>
			</view>
		</view>
		
		<view class="service-box" @click="handleOpenCustomService">
			<view class="row-container">
				<image class="wh-64 mr-15" src="../../static/ic_service.png"></image>
				<view class="column-container">
					<text class="font-333-28 font-weight-600">有问题，找客服！</text>
					<text class="font-999-24 mt-4">工作日9:00-12:00,14:00-18:00</text>
				</view>
			</view>
			<image class="wh-16" src="../../static/ic_arrow_right_black.png"></image>
		</view>
		
		<!-- 待上传订单截图 -->
		<view class="bottom-box" v-if="(actDetailData.checkStatus == 1 || actDetailData.checkStatus == 2)
				&& actDetailData.procedureStatus == 1">
			<text class="bottom-btn"  @click="gotoUploadOrder">上传截图</text>
		</view>
		
		<!-- 审核中  修改截图-->
		<view class="bottom-box"  v-if="actDetailData.procedureStatus == 2">
			<text class="bottom-btn" @click="changeUploadOrder">修改截图</text>
		</view>
		
		
		<!-- 报名成功弹窗 -->
		<view class="buy-success-window" v-if="showBuySuccessWindow">
			<view class="inner-window">
				<image src="../../static/bg_shadow_buy_window.png" class="shadow-bg"></image>
				<image class="top-ic" src="../../static/ic_success.png"></image>
				<text class="font-333-36 font-weight-600">报名成功！</text>
				<text class="font-666-28 mt-10">恭喜您，已经抢到了活动名额</text>
				<!-- <text class="next-step" @click="clickCloseBuyWindow">下一步</text> -->
				
				<view class="code-box" v-if="actDetailData.shopCodeImg">
					<text class="code-hint" >接下来，请长按下方二维码，进入店铺点餐吧</text>
					<image class="code-small" :src="actDetailData.shopCodeImg"
					 :show-menu-by-longpress="true"></image>
				</view>
				<text class="font-666-28" style="padding: 33rpx;" @click="clickCloseBuyWindow">我知道了</text>
			</view>
		</view>
		
		<!-- 取消订单弹窗 -->
		<view class="cancel-order-window" v-if="showCancelWindow">
			<view class="cancel-inner-window">
				<image src="../../static/bg_shadow_buy_window.png" class="cancel-shadow-bg"></image>
				<text class="font-333-36 font-weight-600">取消订单</text>
				<text class="font-666-28 mt-30" style="text-align: center;">
					您本月只有{{actDetailData.orderCount}}次取消报名的机会，超过{{actDetailData.orderCount}}次，本月将无法继续报名</text>
				<view class="row-container-row-between mt-40 width-100p" style="padding-left: 8rpx;padding-right: 16rpx;">
					<text class="cancel-close" @click="showCancelWindow = false">我再想想</text>
					<text class="cancel-confirm" @click="handleCancelOrder">确定取消</text>
				</view>
			</view>
		</view>
		
		<!-- 去店铺点餐弹窗 -->
		<view class="to-shop-window" v-if="showToShopWindow">
			<view class="to-shop-box">
				<image class="to-shop-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600">去店铺点餐</text>
				<image class="shop-code-img" :src="actDetailData.shopCodeImg" :show-menu-by-longpress="true"></image>
				<text class="font-333-28 font-weight-600">长按二维码，进入店铺点餐</text>
				<text class="font-666-28" style="padding: 32rpx;" @click="showToShopWindow=false">我再想想</text>
			</view>
		</view>
		
		<orderDetailImgWindow ref="orderDetailImgWindowRef" :groupImg="actDetailData.crowdImg"></orderDetailImgWindow>
		<fullImageWindow ref="fullImageWindowRef" ></fullImageWindow>
		
		<!-- 阅读提示 -->
		<view class="read-hint-window" v-if="showReadHintWindow">
			<view class="read-hint-box">
				<image class="top-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600 mt-44">温馨提示</text>
				<text class="hint-text">
					为了获得奖励，请仔细阅读页面中“报名须知（必读）”，严格按照商家要求完成订单。
				</text>
				<text class="read-btn" @click="handleCloseReadHintWindow">我知道了</text>
				
				<view class="row-container-center mb-30" @click="noShowHint = !noShowHint">
					<image class="check-icon" src="../../static/ic_chosen.png" v-if="noShowHint"></image>
					<image class="check-icon" src="../../static/ic_choose_not.png" v-if="!noShowHint"></image>
					<text class="font-666-28">我已知晓，不再提示</text>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import timeUtils from '../../utils/time.js'
	import orderDetailImgWindow from '../../components/orderDetailImgWindow.vue'
	import fullImageWindow from '../../components/fullImageWindow.vue'
	
	export default {
		data() {
			return {
				zhuliImgUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/bg_zhuli.png',
				actId:'',
				showBuySuccessWindow:false,
				status:1,  // 0未支付  1已支付 
				showCancelWindow:false,
				actDetailData:{
					surplusCount:0,
					returnAmount:0,
					commission:0,
					fullAmount:0,
					favourableCommentCount:0,
					favourableCommentImgCount:0,
					startTime:'00:00',
					endTime:'00:00',
					integral:0,
					brandName:'',
					platformAmount:0,
					procedureStatus:-1,
				} , //活动详情
				
				waitPayLeftTimeStr : "00:00",
				waitPayLeftTimer:null,
				
				
				tipsList:[] , //要求列表
				orderNo:''  ,// 订单号
				orderId:'' , //订单id  取消订单时要用
				
				joinPeopleCount:'0' , // 加群人数
				showToShopWindow:false , //是否显示去店铺下单的弹窗
				
				showFullHint:false , // 显示全部的品鉴规则
				fullHint:'2、下单前请核对店铺名称、详细地址，订单下错店铺，会导致您无法获得奖励(尽量用二维码进店)；\n3、在外卖平台下单，活动需满足商家要求的实付金额，可以用红包和优惠券，用完后满足实付金额即可；\n4、品鉴截图请于报名后4小时内提交，超时将视为自动放弃，无法获得奖励；\n 5、除饮品店、超市以外，任何店铺仅可随主食点一瓶酒水饮料；\n6、餐品或包装出现问题，请联系商家处理，申请全额退款或理赔订单请放弃名额，不可敷衍内容、图片及与餐品无关内容反馈，并且不可删除评价；\n7、本平台活动与商家品鉴卡不同享，随订单购买外卖平台会员、会员加量包、超值优惠券、准时宝等属于支付给外卖平台的费用，不计入实付金额；\n8、禁止以任何形式向商家索要红包或其他返利，一经发现，账户永封! \n9、禁止在外卖平台询问商家本平台活动，有问题联系客服，餐品问题可联系商家沟通。',				
				
				showReadHintWindow:false , // 阅读提示弹窗
				noShowHint:false,
				
				meituanUrl:'',
				eleUrl:'',
				
				checkPayOrder:0 ,  //是否需要支付  1为不需要支付 
				
				videoAd:null,
				
				leftHour:0,
				leftMin:0,
				leftSec:0,
				
				timeData:{days:0 , hours:0 , minutes:0 , seconds:0}
			}
		},
		
		components:{
			orderDetailImgWindow,
			fullImageWindow
		},
		
		onPullDownRefresh() {
			this.loadActDetail()
		},
		
		onShareAppMessage(res) {
			let that = this
			return{
				title:'参与最星城霸王餐平台活动，5元吃外卖！',
				path:'/pages/index/index?inviteUserId=' + that.cookie.get("jx_userId") + "&shareOrderId=" + that.orderId,
				imageUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240423151942.png'
			}
		},
		
		onReady() {
			this.initVideoAd()
		},
		
		onLoad(options) {
			if (options.actId){
				this.actId = options.actId
			}
			if (options.orderId){
				this.orderId = options.orderId
			}
			
			this.meituanUrl = this.cookie.get("meituanCouponUrl")
			this.eleUrl = this.cookie.get("eleCouponUrl")
			
			this.loadActDetail()
			
			let that = this
			uni.$on("refreshOrderDetail" , ()=>{
				if (this.waitPayLeftTimer){
					clearInterval(this.waitPayLeftTimer)
				}
				
				that.loadActDetail()
			})
		},
		
		onShow() {
			this.joinPeopleCount = getApp().globalData.groupPeopleCount
		},
		
		onUnload() {
			if (this.waitPayLeftTimer){
				clearInterval(this.waitPayLeftTimer)
			}
		},
		
		methods: {
			initVideoAd(){
				let that = this
				this.videoAd = uni.createRewardedVideoAd({
					adUnitId:this.config.auditAdUnitId
				})
				this.videoAd.onLoad(() => {})
				this.videoAd.onError((err) => {})
				this.videoAd.onClose((res) => {
					that.videoAd.offClose()   //加在这里，而不是if后面
					if (res && res.isEnded) {
						// 写入你想奖励的内容
						that.watchedAdToAudit()
					}else {
						uni.showToast({
							title:'取消播放广告，加速失败',
							icon:'none'
						})
				  	}
				}); 
			},
			
			//会员升级
			gotoVipCenter(){
				uni.navigateTo({
					url:'/pages/mine/vipCenter'
				})
			},
			
			goBack(){
				console.log("goBack==========")
				let pages = getCurrentPages()
				if (pages.length <= 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				} else{
					uni.navigateBack()
				}
			},
			
			handleCloseReadHintWindow(){
				this.showReadHintWindow = false
				if (this.noShowHint){
					this.cookie.set("sp_no_show_read_hint" , true)
				}
			},
			
			gotoOtherShop(){
				if (this.actDetailData.threeCode  && this.actDetailData.brandName == "美团"){
					//有第三方id  则跳转到美团外卖小程序商家详情
					uni.navigateToMiniProgram({
						appId:'wx2c348cf579062e56',
						path:'/packages/restaurant/restaurant/restaurant?poi_id=' + this.actDetailData.threeCode
					})
				} else if (this.actDetailData.shopCodeImg){ //否则显示小程序图标
					this.showToShopWindow = true
				}
			},
			
			changeHintShow(){
				this.showFullHint = !this.showFullHint
			},
			
			//点击复制
			handleCopy(val){
				let that = this
				uni.setClipboardData({
					data: val,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			
			//查看大图
			clickShowFullImg(url){
				this.$refs.fullImageWindowRef.changeImageUrl(url)
				this.$refs.fullImageWindowRef.showFullImg = true
			},
			
			//点击报名
			clickToBuy(){
				this.commitOrder()
			},
			
			//点击领取美团或者饿了么的红包
			handleReceiveCoupon(){
				if (this.actDetailData.brandName == '美团'){
					if (this.meituanUrl){
						uni.navigateToMiniProgram({
							appId:'wxde8ac0a21135c07d',
							path:this.meituanUrl,
							success() {
							} 
						})
					}
					
				} else if (this.actDetailData.brandName == '饿了么'){
					if (this.eleUrl){
						uni.navigateToMiniProgram({
							appId:'wxece3a9a4c82f58c9',
							path: this.eleUrl,
							success() {
							}
						})
					}
				}
			},
			
			//上传订单截图
			gotoUploadOrder(){
				if (this.actDetailData.brandName == '大众点评' || this.actDetailData.brandName == '美团团购'){
					uni.navigateTo({
						url:'/pages/order/uploadTicket?orderNo=' + this.orderNo + "&checkApprove="
						 + this.actDetailData.checkApprove + "&checkCollect=" + this.actDetailData.checkCollect 
						 + "&checkComment=" + this.actDetailData.checkComment 
						 + "&brandName=" + this.actDetailData.brandName 
						 + "&screenshotIntro=" + this.actDetailData.screenshotIntro
						 + "&orderId=" + this.orderId
					})
				} else{
					uni.navigateTo({
						url:'/pages/order/uploadOrder?orderNo=' + this.orderNo + "&checkApprove="
						 + this.actDetailData.checkApprove + "&checkCollect=" + this.actDetailData.checkCollect 
						 + "&checkComment=" + this.actDetailData.checkComment 
						 + "&brandName=" + this.actDetailData.brandName 
						 + "&screenshotIntro=" + this.actDetailData.screenshotIntro
						 + "&orderId=" + this.orderId
					})
				}
			},
			
			//修改截图
			changeUploadOrder(){
				if (this.actDetailData.brandName == '大众点评' 
				|| this.actDetailData.brandName == '美团团购'){
					uni.navigateTo({
						url:'/pages/order/uploadTicket?orderNo=' + this.orderNo + "&checkApprove="
						 + this.actDetailData.checkApprove + "&checkCollect=" + this.actDetailData.checkCollect 
						 + "&checkComment=" + this.actDetailData.checkComment
						 + "&isModify=1" + "&brandName=" + this.actDetailData.brandName
						 + "&screenshotIntro=" + this.actDetailData.screenshotIntro
						 + "&orderId=" + this.orderId
					})
				} else{
					uni.navigateTo({
						url:'/pages/order/uploadOrder?orderNo=' + this.orderNo + "&checkApprove="
						 + this.actDetailData.checkApprove + "&checkCollect=" + this.actDetailData.checkCollect 
						 + "&checkComment=" + this.actDetailData.checkComment
						 + "&isModify=1" + "&brandName=" + this.actDetailData.brandName
						 + "&screenshotIntro=" + this.actDetailData.screenshotIntro
						 + "&orderId=" + this.orderId
					})
				}
			},
			
			//去提现
			gotoWithdraw(){
				uni.navigateTo({
					url:'/pages/mine/withdraw'
				})
			},
			
			//点击取消订单
			clickCancelOrder(){
				this.showCancelWindow = true
			},
			
			//加载活动详情
			loadActDetail(){
				let lng = ""
				if (this.cookie.get('jx_lng') && this.cookie.get('jx_lng') != null){
					lng = this.cookie.get('jx_lng')
				}
				let lat = ""
				if (this.cookie.get('jx_lat') && this.cookie.get('jx_lat') != null){
					lat = this.cookie.get('jx_lat')
				}
				
				let that = this
				this.http({
					url:'/active/activeDetail',
					method:'POST',
					hideLoading:true,
					data:{
						activeId  : that.actId,
						orderId : that.orderId,
						longitude : lng,
						latitude : lat
					},
					success(res){
						if (res.code == 200){
							that.actDetailData = res.data
							
							that.checkPayOrder = res.data.checkPayOrder
							
							that.orderNo = that.actDetailData.orderNo
							that.orderId = that.actDetailData.orderId
							
							if ((that.actDetailData.procedureStatus == 0 || that.actDetailData.procedureStatus == 1)
							&& !that.cookie.get("sp_no_show_read_hint") ){
								that.showReadHintWindow = true
							}
							
							that.tipsList = []
							if (that.actDetailData.checkApprove){
								that.tipsList.push("订单所有菜品点赞；")
							}
							if (that.actDetailData.checkCollect){
								that.tipsList.push("收藏本店")
							}
							
							if (that.actDetailData.auditExpireTime 
							&& that.actDetailData.auditExpireTime > 0){
								let auditLeftStr = timeUtils.formatSeconds(that.actDetailData.auditExpireTime)
								that.leftHour = auditLeftStr.split(':')[0]
								that.leftMin = auditLeftStr.split(':')[1]
								that.leftSec = auditLeftStr.split(':')[2]
							} else{
								that.leftHour = "00"
								that.leftMin = "00"
								that.leftSec = "00"
							}
							
							if (that.actDetailData.orderExpireTime && that.actDetailData.orderExpireTime > 0){
								if (that.waitPayLeftTimer){
									clearInterval(that.waitPayLeftTimer)
								}
								that.waitPayLeftTimer = setInterval(()=>{
									if (that.actDetailData.orderExpireTime < 1){
										clearInterval(that.waitPayLeftTimer)
										that.waitPayLeftTimeStr = "00:00"
										that.loadActDetail()
									} else{
										let leftTime = that.actDetailData.orderExpireTime --
										that.waitPayLeftTimeStr = timeUtils.formatSeconds(leftTime)
									}
								} , 1000)
								
							}
							
							
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			
			//订单创建后  调用下单接口
			commitOrder(){
				uni.$emit("refreshIndex")
				uni.$emit("refreshOrderList")
				
				if (!this.orderNo){
					uni.showToast({
						title:"订单id为空",
						icon:'none'
					})
					return
				}
				let that = this
				this.http({
					url:'/pay/unifiedOrder',
					method:"POST",
					data:{
						outTradeNo:that.orderNo
					},
					header : {
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("jx_token")
					},
					success(res){
						if (res.code == 200){
							that.payOrder(res.data)							
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
						
					},
					failed(e){
						
					}
				})
				
			},
			
			//调用支付
			payOrder(payData){
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success(res) {
						uni.showToast({
							title:'支付成功',
							icon:'none'
						})
						uni.$emit("refreshOrderList")
						that.showBuySuccessWindow = true
					},
					fail(e) {
						console.log('payOrder-----' , e)
					}
				})
			},
			
			clickCloseBuyWindow(){
				this.showBuySuccessWindow = false
				this.loadActDetail()
			},
			
			//执行取消订单
			handleCancelOrder(){
				this.showCancelWindow = false
				if (!this.orderId){
					return
				}
				
				let that = this
				this.http({
					url:'/user/order/cancelOrder',
					method:"POST",
					data:{
						orderId:that.orderId
					},
					success(res){
						if (res.code == 200){
							uni.$emit("refreshIndex")
							uni.$emit("refreshOrderList")
							uni.navigateBack({delta:1})
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
						
					},
					failed(e){
						
					}
				})
			},
			
			//点击加群
			clickJoinGroup(){
				this.$refs.orderDetailImgWindowRef.showGroupImg = true
			},
			
			//点击分享按钮  在活动详情没有订单的情况下 是不能分享的  只是提示
			clickShareBtn(){
				let msg = ""
				if (this.actDetailData.procedureStatus == 0 || this.actDetailData.procedureStatus == -1){
					msg = "请先参与活动"
				} else{
					msg = "您的订单已结束，无法继续助力"
				}
				uni.showToast({
					title:msg,
					icon:'none'
				})
			},
			
			gotoAsk(){
				if (this.actDetailData && this.actDetailData.articleUrl){
					uni.navigateTo({
						url:'/pages/index/web?webUrl=' + encodeURIComponent(this.actDetailData.articleUrl)
						// url:'/pages/index/web?webUrl=https://mp.weixin.qq.com/s/sNFG3fkr18DeCHUDYPdMlQ'
					})
				}
			},
			
			//打开客服聊天
			handleOpenCustomService(){
				uni.openCustomerServiceChat({
					corpId:this.config.corpId ,
					extInfo: {url: this.cookie.get('customServiceUrl')},
					success(res){
						
					},
					fail(e){
						console.log('eeeeeeee-----' + JSON.stringify(e))
					}
				})
			},
			
			// 用户触发广告后，显示激励视频广告
			handlePlayAd(){
				if (this.videoAd){
					this.videoAd.show().catch(()=>{
						this.videoAd.load()
						.then(()=> this.videoAd.show())
						.catch(err =>{
							console.log('激励视频 广告显示失败')
						})
					})
				}
			},
			
			//看完视频后调用审核
			watchedAdToAudit(){
				if (!this.orderId) return
				let that = this
				this.http({
					url:'/user/order/passOrder',
					method:"POST",
					data:{
						orderId:that.orderId
					},
					success(res){
						if (res.code == 200){
							uni.$emit("refreshOrderList")
							that.loadActDetail()
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					failed(e){
						
					}
				})
			},
			
			handleChangeCountDown(e){
				this.timeData = e
			}
			
		}
	}
</script>

<style lang="scss">
	.head-img-container{
		width: 100%;
		height: 420rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	
	.title-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 88rpx;
		margin-top: 100rpx;
		z-index: 40;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			padding: 0rpx 22rpx;
			position: absolute;
			left: 0rpx;
		}
	}
	
	.status-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		z-index: 40;
		justify-content: center;
		margin-left: 30rpx;
		padding: 30rpx 0rpx;
		
		.pay-btn{
			background: linear-gradient(90deg, #453900 0%, #333333 100%);
			width: 136rpx;
			height: 54rpx;
			border-radius: 27rpx;
			text-align: center;
			line-height: 54rpx;
			color: #FFD100;
			font-size: 24rpx;
		}
		
		.cancel-btn{
			width: 136rpx;
			height: 54rpx;
			border-radius: 27rpx;
			text-align: center;
			line-height: 54rpx;
			color: #333333;
			font-size: 24rpx;
			border:solid #333333 2rpx;
		}
		
		.play-ad{
			background: linear-gradient(90deg, #453900 0%, #333333 100%);
			border-radius: 30rpx;
			padding: 10rpx 15rpx;
		}
		
		.time-item{
			background: #333333;
			color: #FFD101;
			padding: 5rpx 9rpx;
			font-size: 24rpx;
			font-weight: 600;
			border-radius: 6rpx;
		}
	}
	
	.title-line{
		width: 127rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #FFD100 0%, rgba(255, 209, 0, 0) 100%);
		position: absolute;
		top: 33rpx;
	}
	
	.shop-info-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		background: white;
		margin: 0rpx 30rpx 20rpx 30rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		z-index: 50;
		
		.shop-img{
			width: 183rpx;
			height: 183rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		
		.shop-name{
			font-size: 32rpx;
			color: #333333;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			margin-bottom: 10rpx;
			font-weight: 600;
			max-width: 328rpx;
		}
		
		.tag{
			border: 1rpx solid #FFD9C6;
			background: #FFF5ED;
			border-radius: 4rpx;
			margin-right: 10rpx;
			color: #FF621F;
			font-size: 20rpx;
			font-weight: 600;
			padding: 4rpx 10rpx;
		}
		
		.no-comment{
			border: 1rpx solid #B1ECFF;
			background: #E6F9FF;
			border-radius: 4rpx;
			margin-right: 10rpx;
			color: #4BA2E9;
			font-size: 20rpx;
			font-weight: 600;
			padding: 4rpx 10rpx;
		}
		
		.copy-shop{
			color: #333333;
			font-size: 20rpx;
			height: 38rpx;
			line-height: 36rpx;
			border: 1rpx solid #999999;
			border-radius: 6rpx;
			padding: 0rpx 10rpx;
			flex-shrink: 0;
		}
	}
	
	.get-bonus-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 108rpx);
		background: linear-gradient(180deg, #FFF9DC 0%, #FFFFFF 100%);
		border: 1rpx solid #FFFFFF;
		margin: 0rpx 30rpx 20rpx 30rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		z-index: 50;
		
		.brand-small{
			width: 50rpx;
			height: 50rpx;
			margin-right: 14rpx;
			border-radius: 25rpx;
		}
		
		.step-prize{
			width: 143rpx;
			height: 40rpx;
			margin-left: 6rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			
			.prize-bg{
				width: 100%;
				height: 100%;
				position: absolute;
			}
		}
		
		.get-btn{
			font-size: 24rpx;
			color: #333333;
			padding: 9rpx 14rpx;
			background: #FFD100;
			border-radius: 8rpx;
			font-weight: 600;
		}
	}
	
	.service-box{
		width: calc(100% - 108rpx);
		height: 112rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 16rpx;
		margin: 0rpx 30rpx 20rpx 30rpx;
		padding: 0rpx 24rpx;
	}
	
	
	.time-line-container{
		width: calc(100% - 108rpx);
		background-color: white;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 0rpx 30rpx 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		z-index: 40;
		
		.step-box{
			display: flex;
			flex-direction: row;
			position: relative;
			
			.finish-btn{
				width: 110rpx;
				height: 38rpx;
			}
			
			.step-title{
				color: #333333;
				font-size: 28rpx;
				line-height: 39rpx;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.step-content{
				color: #999999;
				font-size: 24rpx;
				line-height: 34rpx;
			}
			
			.step-dot{
				width: 20rpx;
				height: 20rpx;
				z-index: 20;
			}
			
			.step-mini-line{
				width: 1rpx;
				height: 30rpx;
				border-left: #000000 dashed 1rpx;
			}
			
			.step-middle-line{
				width: 1rpx;
				height: 122rpx;
				border-left: #000000 dashed 1rpx;
			}
			
			.step-short-line{
				width: 1rpx;
				height: 72rpx;
				border-left: #000000 dashed 1rpx;
			}
			
			.step-long-line{
				width: 1rpx;
				height: 144rpx;
				border-left: #000000 dashed 1rpx;
			}
			
			.step-large-line{
				width: 1rpx;
				height: 193rpx;
				border-left: #000000 dashed 1rpx;
			}
			
			.yellow-btn{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				padding: 0rpx 30rpx;
				height: 58rpx;
				background: #FFD100;
				border-radius: 29rpx;
				margin-top: 14rpx;
			}
			
			.btn-arrow{
				width: 16rpx;
				height: 16rpx;
			}
			
			.step-divider{
				width: 100%;
				height: 1rpx;
				background: #F5F5F5;
				margin-top: 20rpx;
			}
			
			.step-prize{
				width: 143rpx;
				height: 40rpx;
				margin-left: 12rpx;
				margin-top: 14rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				
				.prize-bg{
					width: 100%;
					height: 100%;
					position: absolute;
				}
				
			}
			
			.step-withdraw{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 238rpx;
				height: 58rpx;
				border-radius: 29rpx;
				margin-top: 14rpx;
				border: #333333 solid 2rpx;
			}
			
		}
		
		
		
		
		.arrow-ic{
			width: 26rpx;
			height: 26rpx;
			margin-top: 34rpx;
		}
		
		.status-container{
			display: flex;
			flex-direction: row;
			position: relative;
			width: 85rpx;
			height: 85rpx;
			margin-bottom: 16rpx;
			
			.step-ic{
				width: 76rpx;
				height: 76rpx;
				margin-bottom: 16rpx;
				margin-top: 9rpx;
				margin-right: 9rpx;
			}
			
			.status-ic{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
			
		}
		
		.failed-reason{
			background: #FF621F1A;
			margin-top: 30rpx;
			padding: 17rpx 24rpx;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			
			.failed-icon{
				width: 34rpx;
				height: 34rpx;
				margin-right: 16rpx;
			}
		}
		
		.divider{
			width: 100%;
			height: 1rpx;
			background: #F5F5F5;
			margin-top: 30rpx;
		}
	}
	
	.copy{
		padding: 3rpx 12rpx;
		font-size: 22rpx;
		color: #333333;
		border-radius: 4rpx;
		border: #D6D6D6 solid 2rpx;
		margin-left: 12rpx;
		flex-shrink: 0;
	}
	
	.info-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		padding: 24rpx ;
		background-color: white;
		margin: 0rpx 30rpx 20rpx 30rpx;
		border-radius: 16rpx;
		z-index: 20;
		
		.audit-box{
			display: flex;
			flex-direction: column;
			width: calc(100% - 48rpx);
			padding: 16rpx 24rpx;
			border-radius: 10rpx;
			background: rgba(255, 209, 0, 0.2);
			
			.audit-ic{
				width: 34rpx;
				height: 34rpx;
				margin-right: 16rpx;
			}
			
		}
		
	}
	
	.line{
		width: 1rpx;
		height: 22rpx;
		background-color: #999999;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	
	.buy-success-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 236rpx);
			padding: 0 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.top-ic{
				width: 108rpx;
				height: 108rpx;
				margin-top: 50rpx;
				margin-bottom: 20rpx;
			}
			
			.next-step{
				width: 100%;
				height: 88rpx;
				background-color: #FFD100;
				border-radius: 10rpx;
				margin-top: 43rpx;
				margin-bottom: 24rpx;
				text-align: center;
				line-height: 88rpx;
				color: white;
				font-size: 36rpx;
				font-weight: 600;
			}
			
			.code-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border: 1px dashed #FF621F;
				border-radius: 10px;
				width: calc(100% - 152rpx);
				padding: 32rpx;
				margin: 40rpx 44rpx 0rpx 44rpx;
				
				.code-hint{
					color: #FF621F;
					font-weight: bold;
					font-size: 32rpx;
					text-align: center;
				}
				
				.code-small{
					width: 242rpx;
					height: 242rpx;
					margin-top: 32rpx;
				}
				
			}
		}
	}
	
	.cancel-order-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.cancel-inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 212rpx);
			padding-left: 36rpx;
			padding-right: 28rpx;
			padding-top: 44rpx;
			padding-bottom: 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.cancel-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.cancel-close{
				flex-grow: 1;
				height: 88rpx;
				background: #F5F5F5;
				border: 2rpx solid #E0E0E0;
				border-radius: 10rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 28rpx;
				text-align: center;
				line-height: 88rpx;
			}
			
			.cancel-confirm{
				flex-grow: 1;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				color: #333333;
				font-size: 28rpx;
				text-align: center;
				line-height: 88rpx;
				margin-left: 15rpx;
				font-weight: 600;
			}
		}
	}
	
	.to-shop-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.to-shop-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% - 148rpx);
			margin-left: 74rpx;
			margin-right: 74rpx;
			padding-top: 44rpx;
			background: white;
			border-radius: 30rpx;
			position: relative;
			
			.to-shop-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.shop-code-img{
				width: 380rpx;
				height: 380rpx;
				margin-top: 44rpx;
				margin-bottom: 32rpx;
			}
			
		}
	}
	
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background: #F5F5F5;
		z-index: 80;
	}
	
	.bottom-btn{
		width: calc(100% - 60rpx);
		height: 88rpx;
		background: #FFD100;
		border-radius: 10rpx;
		margin: 0rpx 30rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}
	
	.read-hint-window{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 80;
		background: rgba(0, 0, 0, 0.5);
		
		.read-hint-box{
			display: flex;
			flex-direction: column;
			position: relative;
			width: calc(100% - 148rpx);
			border-radius: 30rpx;
			background: white;
			align-items: center;
			
			.hint-text{
				width: calc(100% - 88rpx);
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: center;
			}
			
			.top-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.read-btn{
				width: calc(100% - 88rpx);
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
				text-align: center;
				line-height: 88rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
			}
			
			.check-icon{
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	button::after {
		border: none;//去除边框
	}
	
</style>
